<template>
    <div>
        <div class="sale-type-box">
            <el-radio-group v-model="form.payType_btnType">
                <div class="el-radio-button-box" v-for="item in group_btnType_options"><el-radio-button :value="item.code">{{ item.name }}</el-radio-button></div>
            </el-radio-group>
        </div>
        <el-form class="form-box" ref="formRef" :model="form" label-width="auto" size="large">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="团购券码：" prop="otherTicketCode">
                        <el-input v-model="form.otherTicketCode" placeholder="使用扫码枪或手动输入团购券券码" @focus="focusForm('tgqm')"
                            @blur="blurForm" clearable />
                        <!-- <el-button class="search-btn" text>验证</el-button> -->
                        <img class="qrcode-img" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/vip/qrcode.png"
                            alt="">
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="团购价：" prop="ticketBuyAmt">
                        <el-input v-model="form.ticketBuyAmt" placeholder="请输入金额" @focus="focusForm('ticketBuyAmt')" @blur="blurForm"
                            clearable oninput="value=value.replace(/[^0-9.]/g,'')"/>
                    </el-form-item>
                    <el-form-item label="券面值：" prop="payAmt">
                        <el-input v-model="form.payAmt" disabled placeholder="请输入金额" @focus="focusForm('payAmt')" @blur="blurForm"
                            clearable oninput="value=value.replace(/[^0-9.]/g,'')"/>
                    </el-form-item>
                            <!-- <div> 券数量 <span>1</span></div> -->
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup >
import { formatDecimal } from '@/utils/chenhao'
import Api from '@/api'
import ls from '@/lib/ls'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
// 接收父组件参数 props
const props = defineProps({
    form: {
        type: Object,
        required: false,
    },
    tableInfo: {
        type: Object,
        required: false,
    },
    selectWares: {
        type: Array,
        required: false,
    },
    price: {
        type: String,
        required: false,
    },
    unpay: {
        type: String,
        required: false,
    },
    payData: {
        type: Array,
        required: false,
    },
    saleData: {
        type: Array,
        required: false,
    },
    details: {
        type: Array,
        required: false,
    },
})
const tableInfo = toRef(props, 'tableInfo')
const selectWares = toRef(props, 'selectWares')
const received = toRef(props, 'received')
const price = toRef(props, 'price')
const unpay = toRef(props, 'unpay')
const form = toRef(props, 'form')
const payData = toRef(props, 'payData')
const saleData = toRef(props, 'saleData')
const details = toRef(props, 'details')


const emit = defineEmits(['focusForm'])
// 数字键盘
const focusForm = (str) => {
    // keyboard.value = true
    emit('focusForm', str)
}
const blurForm = (params) => {
    // keyboard.value = false
}

// 获取团购券类型
let group_btnType_options = ref([])
const get_group_btnType_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": { parentCode: '579' } }).then(res => {
        console.log('获取团购券类型 res :>> ', res,);
        group_btnType_options.value = res.result
        form.value.payType_btnType = res.result[0].code
        // console.log();
        
    })
}
get_group_btnType_options()

// 父组件小键盘点击确定
const handleKeyboardConfirm = async(params) => {
    if (unpay.value <= 0) return ElNotification({
        title: '提示',
        message: '收款金额为0无法收款',
        type: 'warning',
    })
    if (Number(form.value.payAmt) > Number(unpay.value)) return ElNotification({
        title: '提示',
        message: '收取金额不能大于收款金额',
        type: 'warning',
    })
    if (!form.value.payAmt) return ElNotification({
        title: '提示',
        message: '请输入收取金额',
        type: 'warning',
    })
    // if(!form.value.otherTicketCode)return ElNotification({
    //     title: '提示',
    //     message: '请输入团购券码',
    //     type: 'warning',
    // })
    if(!form.value.ticketBuyAmt)return ElNotification({
        title: '提示',
        message: '请输入团购价',
        type: 'warning',
    })
    configStore.payFlag = true // 支付开关
    // 处理勾选的商品
    let detailList = []
    if (details.value.length > 0) {
        console.log('1 :>> ', 1);
        detailList = details.value
    } else {
        console.log('2 :>> ', 2);
         console.log(selectWares.value);
        let toolArr = []
        selectWares.value.forEach(item=>{
            toolArr.push(item)
            if (item.subGoods && item.subGoods.length > 0) {
                toolArr.push(...item.subGoods)
            }
        })
   
        console.log(toolArr);
        
        detailList = toolArr.map(item => {
            return item.itemCode
        })
    }
    console.log(form.value);
    let zffs = ''
    let ticketSubType = ''
    group_btnType_options.value.forEach(item => {
        if (item.code == form.value.payType_btnType) {
            zffs = item.name
            ticketSubType = item.code
        }
    });
    const obj = {
        zffs,
        ticketSubType,
        otherTicketCode:form.value.otherTicketCode,
        ticketBuyAmt:form.value.ticketBuyAmt,
        skje: formatDecimal(form.value.payAmt),
        consumeCode: form.value.consumeCode,
        payType: '010',
        totalAmt: unpay.value,
        payAmt: form.value.payAmt,
        payCode: form.value.payCode,
        detailList,
    }
    const data = {
        payType: '010',
        consumeCode: tableInfo.value.consumeCode,
        roomCode: tableInfo.value.roomCode,
        payBatchCode: tableInfo.value.payBatchCode,
        orderAmt: price.value,
        realPayAmt: form.value.payAmt,
        detailList: detailList.join(','),
        payList: [obj],
        serviceAmt: saleData.value
    }
   
    Api.Common.PcObjProcess.Do({ "functionName": "OrderPay", "orgCode": "0004", "contentData": data })
        .then(res => {
            configStore.ispaying.id ++
            console.log('买单确认res :>> ', res);
            obj.itemCode = res.itemCode
            obj.payBatchCode = res.payBatchCode
            tableInfo.value.payBatchCode = res.payBatchCode
            payData.value.push(obj)
            form.value.payAmt = ''
            form.value.payCode = ''
            ls.set('payBatchCode', res.payBatchCode)
        })
        .catch(err=>{
            configStore.ispaying.id ++
        })

}
onMounted(() => {
    form.value.ticketBuyAmt = form.value.payAmt
}) ;

// 暴露方法给父组件
defineExpose({ handleKeyboardConfirm })
</script>

<style scoped lang="scss">
.sale-type-box {
    // width: 360px;
    // display: flex;
    // justify-content: space-between;
    // padding-top: 20px;

    .el-radio-button-box {
        width: 112px;
        margin-right: 12px;
        margin-top: 20px;
    }

    .el-radio-button-box:nth-child(3n) {
        margin-right: 0px;
    }

    ::v-deep {
        // .el-radio-group {
        //     // display: flex;
        //     // justify-content: space-between;
        // }

        .el-radio-button {
            // margin-right: 12px;

            .el-radio-button__inner {
                width: 112px;
                height: 48px;
                // line-height: 40px;
                text-wrap: wrap;
                background: #E6E6E6;
                border-radius: 8px;
                font-weight: 400;
                font-size: 16px;
                color: #666666;
                border: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        }



        .is-active {
            .el-radio-button__inner {
                background: #FFE566;
                color: #212121;
            }
        }
    }
}

.form-box {
    margin-top: 20px;

    ::v-deep {
        .el-input__wrapper {
            background: #F9F9F9;
            border-radius: 8px;
            border: 0;
            font-size: 12px;
            color: #999999;
        }
    }

    .salaAmt {
        font-weight: 400;
        font-size: 16px;
        color: #FF3333;
    }

}

.search-btn {
    font-weight: 400;
    font-size: 16px;
    color: #FF6A00 !important;
    width: 50px;
    // height: 50px;
    position: absolute;
    right: 30px;

}

.qrcode-img {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.group-info-box {
    font-size: 16px;
    color: #212121;
}

.color-FF6A00 {
    color: #FF6A00;
}
</style>
